{{template "member/top.html" .}}
<div class="m-b-md"> <h3 class="m-b-none">{{msg . "Category"}}</h3></div>

<div class="row">
<div class="col-sm-8">
	<section class="panel panel-default">
		<div class="panel-body">
		{{msg . "cateIsPublicNotebook"}}
		<br />
		{{if .notebooks}}
		{{msg . "dragAndSort"}}
        <ul class="list-group gutter list-group-lg list-group-sp sortable">
        	{{range .notebooks}}
          <li class="list-group-item" draggable="true" data-id="{{.NotebookId.Hex}}">
          	<span class="pull-left media-xs"><i class="fa fa-sort text-muted fa m-r-sm"></i></span>
          	<div class="pull-right" style="margin-right: 10px">
            	{{msg $ "permanentLink"}}: /cate/<input data-id="{{.NotebookId.Hex}}" class="url-title" type="text" value="{{if .UrlTitle}}{{.UrlTitle|decodeUrlValue}}{{else}}{{.NotebookId.Hex}}{{end}}"/>
            </div>
            {{.Title}}
          </li>
          {{end}}
        </ul>
        {{else}}
        	{{msg . "noCates"}}
        {{end}}
      </div>
      
      {{if .notebooks}}
      <footer class="panel-footer text-right bg-light lter">
		    <button type="submit" id="baseBtn" class="btn btn-success">{{msg . "saveSort"}}</button>
		</footer>
		{{end}}
	</section>
	
</div>

</div>
{{template "member/footer.html" .}}
<script type="text/javascript" src="/public/member/js/jquery.sortable.js"></script>
<script>
$(function() {
	$("#baseBtn").click(function(){
		var ids = [];
		$(".list-group-item").each(function() {
			ids.push($(this).data("id"));
		});
		ajaxPost("/member/blog/upateCateIds", {cateIds: ids}, function(re){
			if(reIsOk(re)) {
				art.tips(getMsg("Success"));
			} else {
				art.alert(re.Msg || getMsg("Error"));
			}
		});
	});
	
	$(".url-title").change(function(){
		var $t = $(this);
		var url = $t.val();
		var cateId = $t.data('id');
		ajaxPost("/member/blog/updateCateUrlTitle", {cateId: cateId, urlTitle: url}, function(re){
			if(reIsOk(re)) {
				$t.val(re.Item);
			} else {
				art.alert(re.Msg || getMsg("Error"));
			}
		});
	});
});
</script>

{{template "member/end.html" .}}
